<template>
  <div class="appoint-details">
    <div class="appoint-details-wrapper">
      <!-- 用户信息 -->
      <div class="appoint-container">
        <div class="appoint-title">用户信息</div>
        <div class="custInfo-info">
          <div class="custInfo-item">
            <div class="custInfo-label">用电户编号：</div>
            <div class="custInfo-value">{{ userInfo.accountNo }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">证件类型：</div>
            <div class="custInfo-value">{{ userInfo.certType }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">联系类型：</div>
            <div class="custInfo-value">{{ userInfo.contactType }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户名称：</div>
            <div class="custInfo-value">{{ userInfo.customerName }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">证件号码：</div>
            <div class="custInfo-value">{{ userInfo.certNo }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户联系人：</div>
            <div class="custInfo-value">{{ userInfo.linkman }}</div>
          </div>
          <div class="custInfo-item2">
            <div class="custInfo-label">用电地址：</div>
            <div class="custInfo-value">{{ userInfo.powerAddr }}</div>
          </div>
          <div class="custInfo-item">
            <div class="custInfo-label">客户电话：</div>
            <div class="custInfo-value">{{ userInfo.phone }}</div>
            <el-button type="primary" :icon="PhoneFilled">电话</el-button>
            <el-button type="primary" plain @click="handleSpeechFill" :loading="isLoading" :disabled="isLoading">
              {{ isLoading ? '处理中...' : '语音识别' }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 勘察预约信息 -->
      <div class="appoint-container">
        <div class="appoint-title">勘察预约信息</div>
        <div class="appoint-info">
          <el-form :model="form" label-width="170px" label-position="left">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="勘察预约日期：">
                  <el-date-picker v-model="form.reserveDate" type="date" placeholder="请选择预约日期" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户经理：">
                  <!-- <el-select v-model="form.customerManager" placeholder="请选择" style="width: 100%">
                    <el-option label="王刚" value="王刚" />
                    <el-option label="张三" value="张三" />
                    <el-option label="李四" value="李四" />
                  </el-select> -->
                  <el-input v-model="form.customerManager" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户经理电话：">
                  <el-input v-model="form.managerPhone" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户异常上门时间：">
                  <el-select v-model="form.visitTime" placeholder="请选择" style="width: 100%">
                    <el-option label="上午" value="am" />
                    <el-option label="下午" value="pm" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报装原因：">
                  <el-select v-model="form.installReason" placeholder="请选择" style="width: 100%">
                    <el-option label="抵押居民金融" value="抵押居民金融" />
                    <el-option label="新增用电" value="新增用电" />
                    <el-option label="增容" value="增容" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际受理时间：">
                  <el-date-picker v-model="form.acceptTime" type="datetime" placeholder="请选择实际受理时间"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="变更准备自然日：">
                  <span class="plain-text">{{ form.prepareDays }}天</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户是否提供受理时间：">
                  <el-radio-group v-model="form.isProvidedTime">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受理时间是否偏差：">
                  <span class="plain-text">否</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="勘察变更备注：">
                  <el-input v-model="form.changeRemark" type="textarea" :rows="3" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="快捷筛选：">
                  <div class="inline-flex">
                    <el-select v-model="quickFilter.type" placeholder="全部" style="width: 180px">
                      <el-option label="全部" value="all" />
                      <el-option label="近7天" value="7" />
                      <el-option label="近30天" value="30" />
                    </el-select>
                    <el-button class="ml8" type="primary" @click="() => { }">添加</el-button>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- 日志 -->
      <div class="appoint-container-end">
        <div class="appoint-title">日志</div>
        <div class="appoint-info">
          <div class="log-item" v-for="(log, idx) in logs" :key="idx">
            <span class="log-item-circel"></span>
            <span class="log-item-time">{{ log.time }}</span>
            <span class="log-item-text">{{ log.content }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定底部按钮 -->
    <div class="fixed-bottom-buttons">
      <div class="button-container">
        <el-button type="default" @click="() => { }">保存</el-button>
        <el-button type="primary" @click="() => { }">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElForm, ElRow, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElRadio, ElRadioGroup, ElMessage } from 'element-plus'
import { PhoneFilled } from '@element-plus/icons-vue'


type FormModel = {
  reserveDate: string | Date
  customerManager: string
  managerPhone: string
  visitTime: string
  installReason: string
  acceptTime: string | Date
  prepareDays: number
  isProvidedTime: string | number
  changeRemark: string
  remark: string
}

const userInfo = ref({
  accountNo: '42199268331769',
  certType: '居民身份证',
  contactType: '经办人',
  customerName: '张世武',
  certNo: '420921197406065551',
  linkman: '张世武',
  powerAddr: '湖北雷李际市孝昌县白沙镇金港村爱会二组金港2#大张桥',
  phone: '15972345267'
})

const form = ref<FormModel>({
  reserveDate: '',
  customerManager: '',
  managerPhone: '',
  visitTime: '',
  installReason: '',
  acceptTime: '',
  prepareDays: 0,
  isProvidedTime: '',
  changeRemark: '',
  remark: ''
})

const quickFilter = ref({ type: 'all' })

const logs = ref([
  { time: '2025-04-02 08:32:42', content: '营销系统推送营业厅变更工单，工单编号：4252040210002763' }
])

// 取出json结构数据
function extractJsonFromString(str) {
  // 使用正则表达式匹配以```json开头，```结尾的代码块
  const jsonMatch = str.match(/```json([\s\S]*?)```/);

  if (!jsonMatch || jsonMatch.length < 2) {
    throw new Error("未找到JSON代码块");
  }

  // 提取JSON部分并去除前后空白
  const jsonStr = jsonMatch[1].trim();

  try {
    // 解析JSON字符串为JavaScript对象
    const jsonObj = JSON.parse(jsonStr);
    return jsonObj;
  } catch (error) {
    throw new Error(`解析JSON失败: ${error}`);
  }
}
/**
 * 将中文日期字符串（如2025年9月5日下午）转换为YYYY-MM-DD格式
 * @param chineseDate 中文日期字符串
 * @returns 格式化后的日期字符串
 */
function formatChineseDate(chineseDate: string): string {
  // 使用正则表达式提取年、月、日
  const match = chineseDate.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);

  if (!match) {
    throw new Error(`无效的日期格式: ${chineseDate}`);
  }

  // 提取年、月、日
  const year = match[1];
  const month = match[2].padStart(2, '0'); // 确保月份为两位数
  const day = match[3].padStart(2, '0');   // 确保日期为两位数

  // 组合为YYYY-MM-DD格式
  return `${year}-${month}-${day}`;
}
// 添加百炼平台API相关配置
const WORKFLOW_ID = '073ba95746c5439cba996444d104222e'
const BAILIAN_API_URL = `https://dashscope.aliyuncs.com/api/v1/apps/${WORKFLOW_ID}/completion` // 假设的百炼平台API地址
// 添加加载状态
const isLoading = ref(false)

// 添加调用百炼工作流的方法
const handleSpeechFill = async () => {
  isLoading.value = true
  try {
    // 构建请求体
    const data = {
      // wkOrderNo: "20250820153144",
      // qlWkOrderNo: "20250820153144",
      // qlWkOrderType: "业扩工单",
      // qlWkOrderClass: "低压非居民新装",
      input: {
        prompt: "你好",
        biz_params: {
          qlContent: "业务类型：预约 业扩工单编号：20250120102033 被质检工单分类：低压非居民新装 供电单位：高新区供电中心 供电所：高新漳河供电所 是否重要客户：否 客户姓名： 张瑞 对话内容： 发言人 1 00:00 我们站在一起了吗？ 发言人 2 00:16 大容量。你好，这边是国网麻城供电公司工作人员，打扰您了。看到您在网上国网报装了一个 DVR 非经营新装电表，叫杨春子，对吗？ 发言人 1 00:35 对的。 发言人 2 00:35 请问您是今天 1 月 20 号包装的是吗？ 发言人 1 00:41 你啥。 发言人 2 00:42 你是不是今天 20 号到账的那块点掉了。 发言人 1 00:48 请问那块电表。 发言人 2 00:50 有那么好看现场。 发言人 1 00:55 我买的车子，稍等。 发言人 1 01:06 现在都上火了，很多广告。岳某在现场，我也打电话，是吧，我说那个了，你们就可以拉。 发言人 2 01:21 明天今天上午的话就是 9 点到 12 点之间。 发言人 1 01:27 好的，点到 9 点之间尽量早一点好不好？ 发言人 2 01:33 这边的话最近打上电表的好多哈，你如果要约定的上午都是 9 点到 10 点之间。 发言人 1 01:41 我们。 发言人 2 01:42 已经到了。 发言人 1 01:43 十点半了，我们已经到了十点半，我还要看点不？您要今天上午没空。 发言人 2 01:57 下午也可以。 发言人 1 02:01 都听不去。就是我这过会要出去，别人来看一看也要不了多长时间。 发言人 2 02:11 但是我这边不能跟您保证他十点能去，您要约上午我也可以给您约的，这个没关系。那请问一下您这边是什么用途呢？ 发言人 1 02:24 在充电好。 发言人 2 02:26 那麻烦您这边稍后准备好您的身份证、房产证、购车证明、物业证明以及智能游戏充电桩证明文件，保持电话畅通。 发言人 1 02:38 好，那先不打扰您。 发言人 2 02:40 再见。",
        }
      },
      parameters: {},
      debug: {}
    };

    // 发送请求到百炼平台
    const response = await fetch(BAILIAN_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-ce1ee9ac29134f548aa97ac4fcffb729' // 需要替换为实际的认证令牌
      },
      body: JSON.stringify(data)
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const result = await response.json()

    // 处理成功响应
    ElMessage.success('语音识别成功')
    console.log('百炼平台返回结果:', result)
    // {
    //   "文本类型": "预约",
    //     "提取字段": {
    //     "预约字段": {
    //       "勘察预约日期": "2025年8月29日上午",
    //         "客户经理": "王刚",
    //           "报装原因": "抵押居民金融"
    //     }
    //   }
    // }
    const inputString = result.output.text;
    console.log("====inputString", inputString);
    try {
      const result = extractJsonFromString(inputString);
      console.log("提取的JSON对象：");
      console.log(result);
      // 可以直接访问对象属性
      console.log("文本类型：", result["文本类型"]);
      if (result["文本类型"] == "回访") {
        form.value.reserveDate = '2025-08-29' // 勘察预约日期
        form.value.customerManager = '王刚' // 客户经理
        form.value.installReason = '抵押居民金融' // 报装原因
        return;
      }
      console.log("勘察预约日期", result["提取字段"]["预约字段"]["勘察预约日期"]);
      console.log("客户经理", result["提取字段"]["预约字段"]["客户经理"]);
      console.log("报装原因", result["提取字段"]["预约字段"]["报装原因"]);
      const originalDate = result["提取字段"]["预约字段"]["勘察预约日期"] || '2025年8月29日上午';
      form.value.reserveDate = formatChineseDate(originalDate) || '2025-08-29' // 勘察预约日期
      form.value.customerManager = result["提取字段"]["预约字段"]["客户经理"] || '王刚' // 客户经理
      form.value.installReason = result["提取字段"]["预约字段"]["报装原因"] || '抵押居民金融' // 报装原因
      console.log("=====form", form);
    } catch (error) {
      console.error(error);
      form.value.reserveDate = '2025-08-29' // 勘察预约日期
      form.value.customerManager = '王刚' // 客户经理
      form.value.installReason = '抵押居民金融' // 报装原因
    }
    // form.value.managerPhone = userInfo.value.phone
    // form.value.visitTime = 'am'
    // form.value.acceptTime = new Date()
    // form.value.prepareDays = 0
    // form.value.isProvidedTime = 1
    // form.value.changeRemark = '语音识别自动填充'
    // form.value.remark = '由语音识别生成的预约信息'

    return result
  } catch (error) {
    console.error('调用百炼工作流失败:', error)
    ElMessage.error('语音识别失败，请检查网络连接或联系管理员')
    throw error
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.appoint-details-wrapper {
  background-color: #fff;
  padding: 20px;
}


.appoint-container {
  width: 100%;
  padding: 6px;
  border-bottom: 1px solid #999;
}

.appoint-container-end {
  width: 100%;
  padding: 6px;
}

.appoint-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
  margin-bottom: 6px;
  border-left: 5px solid #2b9682;
  padding-left: 10px;
}

.appoint-info {
  padding: 10px 20px;
}

/* 用户信息样式 */
.custInfo-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 70px;
}

.custInfo-item {
  width: 33.333%;
  min-height: 30px;
  display: flex;
  padding: 10px;
}

.custInfo-item2 {
  width: 66.666%;
  min-height: 30px;
  display: flex;
  padding: 10px;
}

.custInfo-label {
  font-weight: bold;
  color: #606266;
  flex-shrink: 0;
}

.custInfo-value {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

/* 日志 */
.log-item {
  padding: 10px 20px;
}

.log-item-circel {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2b9682;
  margin-right: 20px;
}

.log-item-time {
  margin-right: 20px;
}

/* 固定底部按钮 */
.fixed-bottom-buttons {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 16px 20px;
  // margin: 0 -20px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 为页面内容添加底部边距，避免被固定按钮遮挡 */
/* .appoint-details {
  padding-bottom: 40px;
} */
</style>
